<!--一线数据指标管理-->
<template>
  <div class="wrapper-container">
    <div v-if="isAdd">
      <div class="search-container">
        <div class="search-container-item right20">
          <div class="item-name">历史授权学期:：</div>
          <el-select v-model="dataForm.xueqi" placeholder="请选择" style="width: 110px" size="mini">
            <el-option v-for="item in xq" :key="item.id" :label="item.xqmc" :value="item.xqmc"></el-option>
          </el-select>
        </div>
        <div class="search-container-item right20">
          <div class="item-name">被授予角色：</div>
          <el-select v-model="dataForm.roleId" placeholder="请选择" style="width: 110px" size="mini">
            <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="search-button color-primary width70" @click="initList">
          <img src="../../../../assets/assessment/icon-search.png" alt="" />
          <span>查询</span>
        </div>
        <div class="search-button color-yellow" @click="addSQ">
          <img src="../../../../assets/assessment/class-add-icon.png" alt="" />
          <span>新建授权</span>
        </div>
      </div>
      <div class="table-container table-css">
        <el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod" :header-cell-class-name="cellClass" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}">
          <el-table-column prop="roleName" label="被授予角色" align="center" min-width="100"></el-table-column>
          <el-table-column prop="time" label="填报时间" align="center" min-width="100"></el-table-column>
          <el-table-column prop="type" label="字段分类" align="center" min-width="100"></el-table-column>
          <el-table-column prop="count" label="已选填报字段"  min-width="400">
            <div slot-scope="scope" style="padding-left:30px">

              <span class="right30" v-for="i in scope.row.code" :key="i.flcid">{{i.fieldName}}</span>
            </div>
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="100">
              <div class="btn-css" slot-scope="scope">
                  <span class="small-btn color-green" @click="edit" v-if="scope.row.isEdit">
                      <img src="../../../../assets/assessment/icon-plan-record-detail.png"> 修改
                  </span>
                  <span class="small-btn disabled" v-else>
                      <img src="../../../../assets/assessment/disabled-edit.png"> 修改
                  </span>
                  <span class="small-btn edit-yellow" @click="copyInfo(scope.row)">复用本次字段</span>
              </div>
          </el-table-column>
        </el-table>
        <p class="notice">注：每页填写后要单独保存，否则数据会丢失</p>
      </div>
    </div>
    <div v-else>
      <editList @saveData="saveData" :isAdd="editBtn"></editList>
    </div>
    <el-dialog title="复制本次字段" :visible.sync="dialogCopy" :close-on-click-modal="false" width="60%">
      <div class="my-form-container" style="height:180px;width:80%">
        <el-form ref="v" :model="copyForm" class="demo-ruleForm">
          <el-row class="my-form-item">
            <el-col :span="24">
              <div class="my-form-item-label">复制到学期</div>
              <el-form-item  prop="studentName">
                <div class="my-form-item-value">
                  <el-select v-model="copyForm.newXueqi" placeholder="请选择" style="width: 156px">
                    <el-option v-for="item in xq" :key="item.id" :label="item.xqmc" :value="item.xqmc"></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="my-form-item">
            <el-col :span="24">
              <div class="my-form-item-label">被授予角色</div>
              <el-form-item  prop="studentName">
                <div class="my-form-item-value">
                  <el-radio-group v-model="copyForm.newRoleId">
                    <el-radio :label="i.id" v-for="i in roleList" :key="i.id">{{i.roleName}}</el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="my-form-item">
            <el-col :span="24">
              <div class="my-form-item-label">填报时间</div>
              <el-form-item  prop="studentName">
                <div class="my-form-item-value">
								  <el-date-picker class="time" v-model="copyForm.tbsj" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="button-group" slot="footer" style="margin-top:0">
          <div class="" @click="copyBtn">复制</div>
          <div class="" @click="dialogCopy=false">取消</div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import {dataConfigList,copyConfig,roleList} from "@/api/lineData";
import editList from "./edit.vue"

export default {
  data() {
    return {
      roleList:[],//角色列表
      xq:[],
      isAdd:true,
      dialogCopy:false,
      duiList:[],//学员队列表
      dataForm:{
        roleId:'',
        xueqi:''
      },
      tableData: [],
      editBtn:true,
      copyForm:{
        newXueqi:'',
        newRoleId:'',
        origRoleId:'',
        origXueqi:'',
        tbsj:''
      },
      currentXQ:'',
    };
  },
  components:{
    editList
  },
  mounted(){
    //学期列表
    this.commonApi.getXQOption().then(res=>{
      this.xq = res.data;
      this.commonApi.getCurrentXQ().then(mes=>{
        this.dataForm.xueqi = mes.data.xqmc;
        this.currentXQ = mes.data.xqmc;
        this.getRole()
      })
    })
    
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
      if (columnIndex == 0 || columnIndex == 1 || columnIndex == 4) {
          if (rowIndex % this.tableData.length === 0) {
            return {
              rowspan: this.tableData.length,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
    },
    async getRole(){
      let res = await roleList();
      this.roleList = res.data;
      this.dataForm.roleId = '1490880728751644674'
      this.initList();
    },
    //初始化表格
    async initList(){
      let res = await dataConfigList(this.dataForm);
      if(res.code == 200){
        let tableData = [];
        let data = res.data;
        let isEdit = true
        for(let i in data){
          let time = '';
          if(i=='填报时间'){
            time = data['填报时间'][0].defaultValue?data[i].code[0].defaultValue:'';
            if(time){
              isEdit = new Date(time).getTime()>new Date().getTime()?false:true
            }
          }
          tableData.push({
            roleName:this.roleList.filter(item=>item.id == this.dataForm.roleId)[0].roleName,
            time:time,
            type:i,
            code:data[i],
            isEdit:isEdit
          })
        }
        this.tableData = tableData;
      }
    },
    cellClass(row){
        if (row.columnIndex === 3) {
            return 'noneSelectHeader'
        }
    },
    //编辑
    edit(){
      this.isAdd = false
      this.editBtn = false;
    },
    addSQ(){
      this.isAdd = false;
      this.editBtn = true;
    },
    saveData(){
      this.isAdd = true;
    },
    //
    async copyInfo(){
      this.copyForm.origXueqi = this.currentXQ;
      this.copyForm.origRoleId = this.$store.getters.userInfo.role_id
      this.dialogCopy = true;
    },
    async copyBtn(){
      let res = await copyConfig(this.copyForm);
      if(res.code == 200){
        this.dialogCopy = false;
        this.$message.success('复制成功！')
        this.initList()
      }
    }
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
 /deep/ .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
 /deep/ .el-table__footer-wrapper td {
    padding: 0;
    height: 86px;
  }
  /deep/.el-table thead.is-group th.el-table__cell{
    border-color: #c7d7eb;
  }
 /deep/ .el-table--border th, .el-table__fixed-right-patch{
    border-color: #c7d7eb;
  }
}
</style>

<style lang="less" scoped>
@import "../../../../styles/commonCss.less";
.right20{margin-right: 20px;}
.width70{width: 70px;}
.search-container {
  justify-content: flex-start !important;
  position: relative;
}
.color-green{
  background: #F1FFF8;
  border: 1px solid #02C86C;
  color: #02C86C;
  >img{width: 17px!important;height:17px!important}
}
.small-btn{
    justify-content: center;
    &:nth-child(1){margin:33px auto 25px}
    &:nth-child(2){width:136px}
}
.disabled{
   background: #F0F0F0;
    border: 1px solid #747474;
    color: #747474!important;
    cursor: not-allowed!important;
}
.color-yellow{
  color: #F3B815;
  border: 1px solid #F3B815;
  background: #FFF6EF;
  width: 130px;
  position: absolute;
  right: 0;
}
.btn-css{
  margin-top: 40px;
}
.right30{margin-right: 30px;display: inline-block;&:last-child{margin-right: 0;}}
.noneSelectHeader{
  /deep/&>div{
    text-align: center!important;
  }
  
}
 /deep/.button-group{
    padding-bottom: 20px;
    margin-top: 50px;
  }
.notice{
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FF091A;;
    margin-top: 13px;
	}
</style>
